import { createRouter, createWebHashHistory } from 'vue-router';
import Home from '../views/home/index.vue';

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home,
  },
  {
    path: '/dexie',
    name: 'Dexie',
    component: () => import('../views/dexie/index.vue'),
  },
  {
    path: '/window-event',
    name: 'WindowEvent',
    component: () => import('../views/window-event/index.vue'),
  },
  {
    path: '/window-event-win1',
    name: 'WindowEventWin1',
    component: () => import('../views/window-event/window1.vue'),
  },

  {
    path: '/preview-image',
    name: 'PreviewImage',
    component: () => import('../views/preview-image/index.vue'),
  },
  {
    path: '/multiple-tab',
    name: 'MultipleTab',
    component: () => import('../views/multiple-tab/index.vue'),
  },
];

export const router = createRouter({
  history: createWebHashHistory(),
  routes,
});

export const setupRouter = app => app.use(router);
//
// /* 第一种逻辑实现 */
// var box = document.querySelector('.box'); // 获取box元素
// // 鼠标在元素上按下开始拖拽
// box.onmousedown = function () {
//   // 获取按下鼠标时 盒子与页面的距离
//   var originBoxX = box.offsetLeft;
//   var originBoxY = box.offsetTop;
//   // 获取按下鼠标时 鼠标与页面的距离
//   var mouseX = event.pageX;
//   var mouseY = event.pageY;
//   // 在页面上移动
//   window.onmousemove = function () {
//     // 鼠标滑动的距离 = 鼠标移动后的位置 - 按下鼠标时的位置
//     var distanceX = event.pageX - mouseX;
//     var distanceY = event.pageY - mouseY;
//     // 给元素重新赋值 上左定位的位置
//     box.style.left = originBoxX + distanceX + 'px';
//     box.style.top = originBoxY + distanceY + 'px';
//   };
//   // 鼠标松开取消事件
//   box.onmouseup = function () {
//     // 解绑在页面上滚动的事件
//     window.onmousemove = null;
//   };
// };
